<template>
	<view>
		<view class="g-goBack" @click="$utils.toBack()">
			<view class="cuIcon-back"></view>
		</view>
		<!-- 订单详情 -->
		<view class="orderDetail">
			<view class="info">
				<view class="line">订单编号：{{data.tradeNo}}</view>
				<!-- <view class="line">订单标题：{{data.title}}</view> -->
				<view class="line">订单金额：<text class="fc-orange">￥{{data.moneyStr}}</text></view>
				<view class="line">开始时间：{{data.startDate||'-'}}</view>
				<view class="line">结束时间：{{data.endDate||'-'}}</view>
				<view class="line">使用时长：{{data.useDuration}}s</view>
				<view class="refundBtn one">{{data.stateName}}</view>
			</view>
			<view class="mod flex justify-between align-center" @click="$utils.toURL('/order/cdb/operate?tradeNo='+data.tradeNo)">
				<view><text class="cuIcon-settingsfill text-my margin-right-xs"></text>查看订单日志记录</view>
				<text class="cuIcon-right text-gray"></text>
			</view>
			<!-- 支付信息 -->
			<view class="mod">
				<view class="tit">支付信息</view>
				<view class="con">
					<view class="line">
						<view class="key">用户名称</view>
						<view class="value">{{data.memberName||'--'}}({{data.memberId}})</view>
					</view>
					<view class="line">
						<view class="key">支付方式</view>
						<view class="value">{{data.payTypeName}}</view>
					</view>
					<view class="line">
						<view class="key">支付状态</view>
						<view class="value">{{data.payStateName}}</view>
					</view>
					<view class="line">
						<view class="key">支付金额</view>
						<view class="value fc-orange">{{data.payMoneyStr||'--'}}元</view>
					</view>
					<view class="line">
						<view class="key">优惠金额</view>
						<view class="value">{{data.discountMoneyStr||'--'}}元</view>
					</view>
					<view class="line">
						<view class="key">支付时间</view>
						<view class="value">{{data.createDate||'--'}}</view>
					</view>
					<view class="line">
						<view class="key">钱包余额</view>
						<view class="value">{{data.walletMoneyStr||'--'}}</view>
					</view>
				</view>
			</view>
			
			<!-- 租借信息 -->
			<view class="mod">
				<view class="tit">租借信息</view>
				<view class="con">
					<view class="line">
						<view class="key">租借机柜</view><view class="value">{{data.leaseChargingCabinetSn||'--'}}</view>
					</view>
					<view class="line">
						<view class="key">设备类型</view><view class="value">{{data.leaseDeviceTypeName||'--'}}</view>
					</view>
					<view class="line">
						<view class="key">租借卡槽号</view><view class="value">{{data.leaseSlotNum||'--'}}</view>
					</view>
					<view class="line">
						<view class="key">租借充电宝</view><view class="value">{{data.portableBatterySn||'--'}}</view>
					</view>
					<view class="line">
						<view class="key">租借时电量</view><view class="value">{{data.leasePower||'--'}}%</view>
					</view>
					<view class="line">
						<view class="key">租借网点</view><view class="value">{{data.leasePlaceName}}({{data.leasePlaceId}})</view>
					</view>
					<view class="line">
						<view class="key">网点地址</view><view class="value">{{data.leaseAreaName||'--'}}</view>
					</view>
				</view>
			</view>
			
			<!-- 归还信息 -->
			<view class="mod">
				<view class="tit">归还信息</view>
				<view class="con">
					<view class="line">
						<view class="key">归还机柜</view><view class="value">{{data.revertChargingCabinetSn||'--'}}</view>
					</view>
					<view class="line">
						<view class="key">设备类型</view><view class="value">{{data.revertDeviceTypeName||'--'}}</view>
					</view>
					<view class="line">
						<view class="key">归还卡槽号</view><view class="value">{{data.revertSlotNum||'--'}}</view>
					</view>
					<view class="line">
						<view class="key">归还时电量</view><view class="value">{{data.revertPower||'--'}}%</view>
					</view>
					<view class="line">
						<view class="key">归还网点</view><view class="value">{{data.revertPlaceName}}({{data.revertPlaceId}})</view>
					</view>
					<view class="line">
						<view class="key">网点地址</view><view class="value">{{data.revertAreaName||'--'}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 交互框 -->
		<view class="cu-modal modal" :class="(modalName=='refund'||modalName=='cancel'||modalName=='finish')?'show':''">
		  <view class="cu-dialog bg-white">
			  <view class="head" v-if="modalName=='refund'">退部分金额</view>
			  <view class="head" v-else-if="modalName=='cancel'">撤销订单</view>
			   <view class="head" v-else>完成订单</view>
			  <view class="content">
			  	<view class="money" v-if="modalName!='cancel'">￥<input type="digit" v-model="Money"></view>
				<view><input type="text" placeholder="退款说明" v-model="Note"></view>
			  </view>
			  <view class="footer">
			  	<view @click="modalName=null">取消</view>
				<view class="confirm" v-if="modalName=='refund'" @click="btnRefund">退款</view>
				<view class="confirm" v-else-if="modalName=='cancel'" @click="btnCancel">撤销</view>
				<view class="confirm" v-else @click="btnFinish">完成</view>
			  </view>
		  </view>
		</view>
		
		<view style="height: 120rpx;"></view>
		<view class="footBar" v-if="data.payState!=4">
			<view class="button light" v-if="data.state==5" @click=" btnOpenModal('refund')">部分退款</view>
			<view class="button light" v-else @click="btnOpenModal('finish')">完成订单</view>
			<view class="button" @click="modalName = 'cancel'">撤销</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tradeNo:'订单号',
				createDate:null,
				Money:0,
				Note:'',
				//通用
				data:{},
				modalName:null,
			}
		},
		onLoad(option) {
			this.tradeNo = option.tradeNo;
			this.createDate = option.createDate;
		},
		onShow() {
			this._loadOrderInfo();
		},
		methods: {
			_loadOrderInfo:function(){
				if(this.tradeNo){
					const _self = this;
					const api = this.$request;
					api.post(api.url.cdbOrderDetail,{
						tradeNo:this.tradeNo,
						createDate:this.createDate
					},(res)=>{
						if(res.code==200){
							_self.data = res.body;
						}
					})
				}
			},
			btnOpenModal(type){
				this.modalName = type;
				const {moneyStr} = this.data;
				this.Money = moneyStr;
			},
			//退部分
			btnRefund(){
				const api = this.$request;
				const self = this;
				this.modalName = null;
				api.post(api.url.cdbOrderRefund,{
					tradeNo:self.data.tradeNo,
					money:self.Money,
					note:self.Note
				},(res)=>{
					console.log(res)
					if(res.code==200){
						setTimeout(function(){
							uni.showToast({
								title:'订单退款成功',
								icon:'success'
							})
							self._loadOrderInfo();
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			//撤销订单
			btnCancel(){
				const api = this.$request;
				const self = this;
				this.modalName = null;
				api.post(api.url.cdbOrderCancel,{
					tradeNo:self.data.tradeNo,
					note:self.Note
				},(res)=>{
					console.log(res)
					if(res.code==200){
						setTimeout(function(){
							uni.showToast({
								title:'撤销订单成功',
								icon:'success'
							})
							self._loadOrderInfo();
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			//完成订单
			btnFinish(){
				const api = this.$request;
				const self = this;
				this.modalName = null;
				api.post(api.url.cdbOrderFinish,{
					tradeNo:self.data.tradeNo,
					money:self.Money,
					note:self.Note,
				},(res)=>{
					console.log(res)
					if(res.code==200){
						setTimeout(function(){
							uni.showToast({
								title:'完成订单成功',
								icon:'success'
							})
							self._loadOrderInfo();
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.fc-orange{
		font-weight: 600;
		color: #e85b36;
	}
	.orderDetail {
		// padding: 30rpx 32rpx;
		padding-top:40rpx;
		.info {
			position: relative;
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			font-size: 30rpx;
			color: #2F2F2F;
			padding: 30rpx;
		
			.line {
				line-height: 68rpx;
			}
			.refundBtn {
				position: absolute;
				top: 40rpx;
				right: 40rpx;
				width: 130rpx;
				height: 46rpx;
				line-height: 46rpx;
				text-align: center;
				background: #f56c6c;
				border-radius: 23rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
		.tables{
			background-color: white;
			border-radius: 10rpx;
			.title{
				padding-top:20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.icon{
					color: #fc8452;
					font-weight: 600;
				}
			}
		}
		.mod {
			background: #fff;
			margin-bottom: 20rpx;
			padding: 20rpx 40rpx;
			.tit {
				font-size: 30rpx;
				// font-weight: 600;
				padding-bottom: 10rpx;
				margin-bottom: 20rpx;
				border-bottom: 1rpx solid #eee;
			}
		
		
			.line {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				line-height: 68rpx;
				.icon{
					font-weight: 600;
				}
			}
		
			.key {
				font-weight: Medium;
			}
		
			.log {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin: 0;
			}
		
			.ico-arrow {
				width: 18rpx;
				height: 30rpx;
			}
		}
	}
	.modal{
		.head{
			margin: 40rpx 0 60rpx;
			font-size: 30rpx;
			font-weight: 600;
		}
		.content{
			&>view{
				width: 80%;
				height: 80rpx;
				margin: 0 auto 48rpx;
				border:1rpx solid #e0e0e0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding-left: 20rpx;
				font-size: 24rpx;
				input{
					width: 100%;
					height: 80rpx;
					text-align: left;
					font-size: 24rpx;
				}
			}
		}
		.footer{
			display: flex;
			justify-content: center;
			align-items: center;
			&>view{
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #fff;
				color: #eca768;
				border-top: 1rpx solid #e0e0e0;
			}
			.confirm{
				background:linear-gradient(90deg,#eca768,#e85b36);
				color: #ffffff;
			}
		}
	}
	.footBar{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding:20rpx 20rpx 40rpx;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 10rpx #e0e0e0;
		.button{
			color: white;
			background:linear-gradient(90deg,#eca768,#e85b36);
			width: 240rpx;
			height: 68rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 10rpx;
			border-radius: 10rpx;
			&.light{
				background:linear-gradient(270deg,#989898,#272822);
			}
		}
		.icon{
			font-size: 28rpx;
			color: #909090;
			margin-right: 30rpx;
		}
	}
</style>